<template>
	<view class="item-block">
		<view class="header-search" @click="inputfn">
			<u--input placeholder="请输入赛事名称" suffixIcon="search" disabled suffixIconStyle="color: #bfbfbf"></u--input>
		</view>
		<view class="header-swiper">
			<u-swiper :list="bannerslist" @change="changeswiper" :autoplay="false" :indicator='true'
				indicatorActiveColor='#fff'>
				<view slot="indicator" class="indicator">
					<view v-for="(item, index) in bannerslist" :key="index"
						:class="index == current ? 'indicator__dotactive' : 'indicator__dot'">
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="header-noticebar">

			<u-notice-bar :text="noticelist" mode="closable" direction="column" @click="noticefn"></u-notice-bar>

		</view>
		<view class="item_other">
			<view class="other_one" @click="goevent">
				<view class="iconfont icon-gaoerfu">
				</view>
				<view class="title">
					赛事活动
				</view>
			</view>
			<view class="other_two" @click="showToast" v-if="activetype==1">
				<view class="iconfont icon-quanzi2">

				</view>
				<view class="title">
					球友圈
				</view>
			</view>
			<view class="other_three" @click="showToast" v-if="activetype==1">
				<view class="iconfont icon-jifenshangcheng">

				</view>
				<view class="title">
					积分商城
				</view>
			</view>
			<view class="other_four" @click="showToast" v-if="activetype==1">
				<view class="iconfont icon-huarunjishoujiechu">

				</view>
				<view class="title">
					物品寄售
				</view>
			</view>
		</view>
		<view class="popular_item" v-if="datalist.length>0">
			<view class="polular_title">
				<view class="title_left">
					热门赛事
				</view>
				<view class="title_right" @click="goevent">
					更多
				</view>
			</view>
			<view class="polular_list">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :duration="500">
					<swiper-item class="" v-for="(item,index) in datalist" :key="index" @click="itemdetail(item)"
						:item-id='item.id'>
						<view class="polular_list_item" :style="{ backgroundImage: 'url(' + item.urlimg + ')' }">
							<view class="item_left">
								<view class="title_item">
									{{ item.raceName.length > 7 ? item.raceName.slice(0, 7) + '...' : item.raceName }}
								</view>
								<view class="team_item">
									参赛队伍：{{item.joinNum}}/{{item.teamNum}}
								</view>
								<view class="address_item">
									<span class="iconfont icon-dizhi"></span>
									<span class="address_text">{{item.placeName}}</span>
								</view>
							</view>
							<view class="item_right">
								<view class="right_top">
									<view class="time">
										{{item.statetype==4?'报名结束时间':(item.statetype==5?'报名开始时间':'赛事开始时间')}}
									</view>
									<view class="time">
										{{item.statetype==4?item.signEnd.substring(0, 16):(item.statetype==5?item.signStart.substring(0, 16):item.startTime.substring(0, 16))}}
									</view>
								</view>
								<view class="time_but">
									<u-button type="primary" class="infobut" text="未开始" color='#828282'
										v-if="item.statetype==5"></u-button>
									<u-button type="primary" v-else color='#de3600'
										:text="item.statetype==1?'已结束':(item.statetype==2?'进行中':(item.statetype==3?'已报满':(item.statetype==4?'报名中':'')))"></u-button>
								</view>
							</view>
						</view>
					</swiper-item>

				</swiper>
				<view>

				</view>
			</view>
		</view>
		<view class="botlist">
			<view class="polular_title">
				<view class="title_left">
					运动装备
				</view>
				<view class="title_right">
					更多
				</view>

			</view>
			<!-- <button open-type="share" class="button_item">
				<span style="font-size: 12px;">分享</span>
			</button> -->
			<custom-waterfalls-flow ref="waterfallsFlowRef" :value="typelist" :column="2" imageKey='image'
				:columnSpace="1.5" :seat="2" @wapperClick="messagedetail" @imageClick="messagedetail"
				@loaded='imgloader'>
				<view class="one_class" v-for="(item,index) in typelist" :key="index" slot="slot{{index}}">
					<view class="title_name">
						{{item.name}}
					</view>
					<view class="dec_name">
						<span>{{item.dec}}</span>
					</view>
					<view class="money_name">
						<span>￥</span>{{item.maney}}
					</view>
				</view>

			</custom-waterfalls-flow>
		</view>
		<!-- <view class="">
			123{{obj}}
		</view> -->
		<layout></layout>
		<u-toast ref="uToast"></u-toast>
		<loginpage ref="loginst" @refresh='refreshinfo'></loginpage>
	</view>
</template>

<script scoped>
	import layout from '../layout/layout.vue'
	import loginpage from '../layout/login_page.vue'
	export default {
		props: {},
		components: {
			layout,
			loginpage
		},
		data() {
			return {
				activetype: 1, //隐藏模块的状态
				noticeduration: 0,
				typelist: [
					{
						image: 'https://web.ptgolf.net/image/webchat/10.png',
						name: '高尔夫比赛专业用球',
						dec: '满200减20',
						maney: '200.00'
					},
					{
						image: 'https://web.ptgolf.net/image/webchat/11.png',
						name: '高尔夫比赛专业用球',
						dec: '满200减20',
						maney: '64800.00'
					},

				],
				datalist: [],
				current: 0,
				bannerslist: [],
				noticelist: [],
				noticearr: [], //公告
				obj: '' //存储分享过来时的参数
			}
		},
		onLoad(options) {
			if (options.objinfo) {
				this.obj = decodeURIComponent(options.objinfo)
				this.refreshinfo(2)
			}

		},
		computed: {},
		watch: {},
		created() {
			uni.$emit('update', {
				active: 1
			}) // 触发事件并传递参数	
			this.activefn()
		},
		mounted() {
			this.banners() //banners图
			this.notices() //公告
			this.eventlist() //赛事列表

		},

		methods: {
			//这个方法用来隐藏模块,方便发布小程序
			activefn() {
				const that = this
				this.$request(`/race/getPlanState`, 'get')
					.then(
						res => {
							that.activetype = res.data.data
						})
			},
			// 判断是否登录如果登录
			typefn(teamid, typeid) {
				const that = this;
				that.userInfo = uni.getStorageSync('userinfokey')
				//判断是否有token如果有当再次点击头像跳转到详情页
				if (that.userInfo.token) {
					const objdata = JSON.parse(decodeURIComponent(this.obj))
					this.$request(`/race/getTeamState/${objdata.teamId}`, 'get')
						.then(
							res => {
								if (res.data.data) {
									that.judgetype(teamid, typeid)
								} else {
									that.$refs.uToast.show({
										type: 'error',
										message: "队伍不存在",
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

									})
								}

							})



					return;
				}
				uni.showModal({
					title: '登录提示',
					content: '您还未登录,点击确定前往登录体验更过功能!!!',
					success: function(res) {
						if (res.confirm) {
							that.$refs.loginst.login(2)
						} else if (res.cancel) {
							return

						}
					}
				});
			},
			// 接受分享信息
			refreshinfo(e) {

				if (e == 2) {
					const objdata = JSON.parse(decodeURIComponent(this.obj))
					if (objdata.type == 999) {
						this.typefn(objdata.teamId, 1)
					} else if (objdata.type == 888) {
						this.typefn(objdata.teamId, 2)
					}
				}
			},
			// 判断是否已加入队伍,如果已加入跳转详情页,如果未加入就跳转加入队伍页面
			judgetype(teamid, typeid) {
				const that = this
				this.$request(`/race/getMemberTeamState/${teamid}`, 'get')
					.then(
						res => {
							if (res.data.data) {
								//已加入队伍
								const objdata = JSON.parse(decodeURIComponent(that.obj))
								const obj = {
									raceId: Number(objdata.raceId),
									teamId: Number(objdata.teamId),
								}
								const objStr = JSON.stringify(obj);
								this.$request(`/race/signDetail/${obj.raceId}`, 'get')
									.then(
										res => {
											if (res.data.data.deleted == 0) {
												let currentTime = new Date();
												if (res.data.data.raceState == 1) {
													uni.reLaunch({
														url: '/subpackage1/eventpage/event_end?id=' +
															encodeURIComponent(obj.raceId)
													});
												} else if (currentTime > new Date(res.data.data.startTime)) {
													uni.reLaunch({
														url: '/subpackage1/eventpage/event_progress?id=' +
															encodeURIComponent(obj.raceId)
													});
												} else {
													uni.reLaunch({
														url: '/subpackage1/eventpage/team_detail?id=' +
															encodeURIComponent(objStr)
													});
												}
											} else {
												that.$refs.uToast.show({
													type: 'error',
													message: "赛事不存在",
													iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

												})
											}

										})

							} else {
								console.log('开始加入');
								const objdata = JSON.parse(decodeURIComponent(that.obj))
								const raceId = Number(objdata.raceId)
								this.$request(`/race/signDetail/${raceId}`, 'get')
									.then(
										res => {
											if (res.data.data.deleted == 0) {
												let currentTime = new Date();
												if (res.data.data.raceState == 1 || currentTime > new Date(res.data.data
														.startTime)) {
													//未加入队伍,并且队伍已经开始比赛,或者已结束比赛
													that.$refs.uToast.show({
														type: 'error',
														message: "该链接已失效",
														iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',
													})
													return //如果用户退出队伍再次点击链接,已结束||进行中就不进行操作

												} else {
													if (typeid == 1) {
														uni.navigateTo({
															url: '/subpackage1/eventpage/sgarer_enters?id=' +
																encodeURIComponent(that.obj)
														});
													} else if (typeid == 2) {
														uni.navigateTo({
															url: '/subpackage1/eventpage/sgarer_add?id=' +
																encodeURIComponent(that.obj)
														});
													}
												}
											} else {
												that.$refs.uToast.show({
													type: 'error',
													message: "赛事不存在",
													iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

												})
											}
										})

							}

						})
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'warning',
					message: "此模块暂未开放",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

				})
			},
			// 用户点击首页搜索框直接跳转到赛事列表并且传参1代表输入框自动获取焦点,唤起键盘
			inputfn() {
				uni.navigateTo({
					url: '/subpackage1/eventpage/eventlist?id=' + encodeURIComponent(1)
				});
			},
			// 赛事列表
			eventlist() {
				const that = this
				const data = {
					pagNum: 1,
					pageSize: 5,
				}
				this.$request(`/index/raceList`, 'post', data)
					.then(
						res => {
							const array = res.data.data.records
							array.forEach(item => {
								let currentTime = new Date();
								// 判断 racestate 是否为 1
								if (item.raceState == 1) {
									item.statetype = 1;
									item.urlimg = 'https://web.ptgolf.net/image/webchat/1.png';
								}
								// 如果 racestate 不是 1，判断当前时间是否大于 startime
								else if (currentTime > new Date(item.startTime)) {
									item.statetype = 2;
									item.urlimg = 'https://web.ptgolf.net/image/webchat/1.png';
								}
								// 如果还是不满足，判断 joinNum 是否等于 teamNum
								else if (item.joinNum == item.teamNum) {
									item.statetype = 3;
									item.urlimg = 'https://web.ptgolf.net/image/webchat/1.png';
								}
								// 如果还不满足，判断当前时间是否大于 signstar
								else if (currentTime > new Date(item.signStart)) {
									item.statetype = 4;
									item.urlimg = 'https://web.ptgolf.net/image/webchat/2.png';
								}
								// 如果都不满足，默认设置为 statetype 5 
								else {
									item.statetype = 5;
									item.urlimg = 'https://web.ptgolf.net/image/webchat/2.png';
								}
							});

							that.datalist = array


						})
			},
			// 公告详情
			noticefn(e) {
				uni.navigateTo({
					url: '/subpackage1/eventpage/noticefn_detail?id=' + encodeURIComponent(this.noticearr[e].id)
				});
			},
			// banner图
			banners() {
				const that = this
				this.$request(`/index/banners`, 'get')
					.then(
						res => {
							that.bannerslist = res.data.data.map(item => {
								return item.bannerUrl
							})
						})

			},
			// 公告信息
			notices() {
				const that = this
				this.$request(`/index/notices`, 'get')
					.then(
						res => {
							that.noticelist = res.data.data.map(item => {
								return item.noticeTitle
							})
							that.noticearr = res.data.data
						})

			},
			// 列表
			goevent() {
				uni.navigateTo({
					url: '/subpackage1/eventpage/eventlist'
				});
			},
			changeswiper(e) {
				this.current = e.current
			},
			//商城列表区域
			imgloader() {

			},
			//商城列表区域
			messagedetail() {

			},
			itemdetail(e) {
				if (e.statetype == 1) {
					uni.navigateTo({
						url: '/subpackage1/eventpage/event_end?id=' + encodeURIComponent(e.id)
					});
				} else if (e.statetype == 2) {
					uni.navigateTo({
						url: '/subpackage1/eventpage/event_progress?id=' + encodeURIComponent(e.id)
					});
				} else if (e.statetype == 3) {
					uni.navigateTo({
						url: '/subpackage1/eventpage/event_introduce?id=' + encodeURIComponent(e.id)
					});
				} else if (e.statetype == 4) {
					uni.navigateTo({
						url: '/subpackage1/eventpage/event_introduce?id=' + encodeURIComponent(e.id)
					});
				}else if (e.statetype == 5){
					this.$refs.uToast.show({
						type: 'warning',
						message: "赛事暂未开始",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',
					
					})
				}
			}
		}
	}
</script>
<!-- u-notice__swiper__item__text u-line-1 data-v-3bda0f19 -->
<style scoped lang="scss">
	::v-deep .u-notice__swiper__item__text {
		width: 100%;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;
		/* 限制为 3 行显示 */
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.item-block {
		height: calc(100vh - 140rpx);
		background-color: #f4f4f4;
		overflow: auto;

		.header-search {
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;


			::v-deep .u-input {
				// border: 2rpx solid #dededf;
				border-radius: 36rpx;
				box-shadow: 0 0 4rpx #b9b9ba;

				/* 添加阴影 */
				.u-icon__icon {
					color: #de3600 !important;
					font-size: 50rpx !important;
					font-weight: 700 !important;

				}
			}
		}

		.header-swiper {
			::v-deep .u-swiper {
				border-radius: 0 !important;
				height: 320rpx !important;

				// height: 300rpx !important;
				.u-swiper__wrapper {
					height: 320rpx !important;
				}
			}

			::v-deep .u-swiper__wrapper__item__wrapper__image {
				border-radius: 0 !important;
				height: 320rpx !important;
			}

			::v-deep .u-swiper__indicator {
				width: calc(100% - 40rpx);
				padding-right: 40rpx;

				.indicator {
					// @include flex(row);
					// justify-content: center;
					display: flex;
					justify-content: flex-end;
					/* 右侧对齐 */


					.indicator__dot {
						height: 12rpx;
						width: 12rpx;
						border-radius: 200rpx;
						background-color: rgba(255, 255, 255, 0.35);
						margin: 0 4rpx;
						transition: background-color 0.3s;


					}

					.indicator__dotactive {
						height: 12rpx;
						width: 30rpx;
						border-radius: 200rpx;
						background-color: #fff;
						margin: 0 4rpx;
						transition: background-color 0.3s;
					}
				}
			}
		}

		.header-noticebar {
			margin: 10rpx 4rpx;
		}

		.item_other {
			display: flex;
			width: calc(100% - 160rpx);
			margin: 20rpx 40rpx;
			padding: 20rpx 40rpx;
			height: 120rpx;
			border-radius: 20rpx;
			background-color: #fff;
			justify-content: space-between;

			.other_one,
			.other_four,
			.other_three,
			.other_two {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				text-align: center;
				align-items: center;
				color: #1e1e1e;

				.icon-gaoerfu {
					font-size: 46rpx;
					// font-weight: 500;
				}

				.icon-quanzi2 {
					font-size: 56rpx;
				}

				.icon-jifenshangcheng {
					font-size: 56rpx;
				}

				.icon-huarunjishoujiechu {
					font-size: 56rpx;
				}

				.title {
					font-size: 24rpx;
				}
			}
		}

		.popular_item {
			width: calc(100% - 80rpx);
			padding: 0 40rpx;

			.polular_title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title_left {}

				.title_right {
					font-size: 24rpx;
					color: #de3600;
				}
			}

			.polular_list {
				margin-top: 20rpx;

				.polular_list_item {
					background-size: 100% 100%;
					background-repeat: no-repeat;
					margin-bottom: 20rpx;
					height: 170rpx;
					background-color: #fff;
					border-radius: 20rpx;
					box-shadow: 0 0 4rpx #b9b9ba;
					padding: 16rpx 30rpx;
					display: flex;
					justify-content: space-between;

					.item_left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title_item {
							font-size: 32rpx;
							font-weight: 600;
						}

						.team_item {
							font-size: 24rpx;
							color: #afafaf;
						}

						.address_item {
							margin-top: 20rpx;

							.icon-dizhi {
								font-size: 26rpx;
								border-radius: 20rpx;
								padding: 4rpx;
								background-color: #de3600;
								color: #fff;
								margin-right: 6rpx;
							}

							.address_text {
								font-size: 24rpx;
								color: #afafaf;
							}
						}
					}

					.item_right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-end;

						.right_top {
							font-size: 20rpx;
							color: #afafaf;
							display: flex;
							flex-direction: column;
							align-items: flex-end;

						}

						::v-deep .u-button {
							border: 0rpx;
							border-radius: 60rpx;
							// background-color: #de3600;
							height: 55rpx;
							width: 140rpx;
						}

						// ::v-deep .infobut {
						// 	background-color: #de3600 !important;
						// }
					}
				}


			}
		}

		.botlist {
			padding: 0 40rpx;

			::v-deep .waterfalls-flow {
				image {
					height: 300rpx !important;
				}
			}

			.polular_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;


				.title_right {
					font-size: 24rpx;
					color: #de3600;
				}
			}

			.one_class {
				padding: 10rpx 20rpx;

				.title_name {
					font-weight: 600;
					font-size: 30rpx;
					width: 100%;
					white-space: nowrap;
					/* 防止文字换行 */
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.dec_name span {
					font-size: 20rpx;
					color: #de3600;
					border: 2rpx solid #de3600;
					padding: 0rpx 10rpx;
					border-radius: 20rpx;


				}

				.money_name {
					margin-top: 10rpx;
					color: #de3600;
					font-size: 34rpx;
					font-weight: 600;

					span {
						font-size: 26rpx;
					}
				}

			}
		}
	}
</style>